<template>
  <div>
    <div>
      <el-row style="background: white">
        <el-col :span="24">
          <div class="tbUpDiv">
            <div style="display: flex;">
              <img src="src/public/imgs/U@D%7D4YOV4S5~D1%5B0%5B7(Z1QR.png" class="tbImg">
              <span class="tbUpPost">面试安排</span>
            </div>
            <div style="width: 160px;">
              <el-button type="primary" class="tbUpButt" @click="interapp()">面试申请</el-button>
            </div>
            </div>
          </el-col>
      </el-row>
      <el-row>
        <el-col>
        <div class="tbScenDiv">
        <div style="display: flex; margin-top: 20px;margin-bottom: 20px">
          <div><span>面试人员：</span><br>
            <el-input v-model="souForm.interviName" style="width: 180px" @keyup.enter="JobMohu()"/></div>
          <div style="margin-left: 20px"><span>面试岗位：</span><br>
            <el-input v-model="souForm.jobdemandName" style="width: 180px" @keyup.enter="JobMohu()"/></div>
          <div style="margin-left: 20px"><span>面试阶段：</span><br>
            <el-select v-model="souForm.interviewState"  placeholder="请选择">
            <el-option label="未面试" value="0" @click="JobMohu()"/>
            <el-option label="面试中" value="1" @click="JobMohu()"/>
              <el-option label="已面试" value="2" @click="JobMohu()"/>
          </el-select>
          </div>
           <div style="margin-left: 20px"><span>面试阶段：</span><br>
           <el-select v-model="souForm.interviewNumber"  placeholder="请选择">
           <el-option label="初试" value="1" @click="JobMohu()"/>
           <el-option label="复试" value="2" @click="JobMohu()"/>
           </el-select>
           </div>
          <div style="margin-top: 20px;margin-left: 10px">
            <el-button @click="chongzhi()">重置</el-button>
          </div>
        </div>
        </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-table :data="d.tableData" @row-click="dianjixq"  style="width: 100%">
            <el-table-column align='center' prop="interviName" label="面试人员" width="130" />
            <el-table-column align='center' prop="jobdemandName" label="面试岗位" width="130" />
            <el-table-column align='center' prop="interviewDate" label="申请面试时间" width="180">
              <template #default="s">
                <span>{{s.row.interviewDate.slice(0,10)+" "+s.row.interviewDate.slice(11,19)}}</span>
              </template>
            </el-table-column>
              <el-table-column align='center' prop="interviewApdate" label="安排面试时间" width="180">
                <template #default="s">
                  <span>{{s.row.interviewApdate.slice(0,10)+" "+s.row.interviewApdate.slice(11,19)}}</span>
                </template>
              </el-table-column>
                <el-table-column align='center' prop="interviewNumber" label="面试阶段" >
                  <template #default="s">
                    <span v-if="s.row.interviewNumber==1">初试</span>
                    <span v-if="s.row.interviewNumber==2">复试</span>
                  </template>
                </el-table-column>
                  <el-table-column align='center' prop="interviewState" label="面试状态">
                    <template #default="s">
                      <div style="background:rgb(234,242,251);color:#446af3;height:80%;width:60%;margin:0 20% 0;font-size: 12px" v-if="s.row.interviewState==0">未面试</div>
                      <div style="background:rgb(252,240,241);color:#D93e34;height:80%;width:60%;margin:0 20% 0;font-size: 12px" v-if="s.row.interviewState==1">面试中</div>
                      <div style="background:rgb(217,246,229);color:#479d5c;height:80%;width:60%;margin:0 20% 0;font-size: 12px" v-if="s.row.interviewState==2">已面试</div>
                      <div style="background:rgb(252,240,241);color:#D93e34;height:80%;width:60%;margin:0 20% 0;font-size: 12px" v-if="s.row.interviewState==3">已过期</div>
                    </template>
                  </el-table-column>
                    <el-table-column align='center' prop="interviewResul" label="面试结果" >
                      <template #default="s">
                        <span v-if="s.row.interviewResul==1">面试通过</span>
                        <span v-if="s.row.interviewResul==2">面试失败</span>
                        <span v-if="s.row.interviewResul==3">未公布</span>
                      </template>
                    </el-table-column>
                    <el-table-column align='center' prop="interviewPerson" label="负责人" width="130" />
                      <el-table-column align='center' label="操作" >
                        <template #default="s">
                             <el-button v-if="s.row.interviewState==0" @click.stop="kais(s.row.interviewId)">
                              开始面试
                             </el-button>
                             <el-button v-if="s.row.interviewState==1" @click.stop="getResut(s.row.interviewId)">
                             给予面试结果
                             </el-button>
                            <el-button v-if="s.row.interviewResul==1&&s.row.interviewState==2" @click.stop="employ(s.row.interviName,s.row.interviPhone,s.row.jobdemandName)">
                              发送offer
                            </el-button>
                        </template>
                      </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row justify="center">
        <el-col>
          <el-pagination
              v-model:currentPage="d.pageNo"
              v-model:page-size="d.pageSize"
              :page-sizes="[5,10, 20, 30, 40]"
              small="small"
              layout="total, sizes, prev, pager, next, jumper"
              :total="d.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"/>
        </el-col>
      </el-row>
    </div>
  </div>
  <el-dialog v-model="d.faromater">
      <div style="text-align: center">此次面试结果如何</div>
      <div style="text-align: center;margin-top: 20px">
        <el-button @click="getResutone()">满意</el-button>
        <el-button @click="getResuttwo()">不满意</el-button>
      </div>
  </el-dialog>
  <el-dialog v-model="d.faromate2r" title="面试操作记录" style="width: 60%">
    <el-table :data="d.tableData2" style="width: 100%">
      <el-table-column align='center'  prop="interviName" label="面试人员"  />
      <el-table-column align='center'  prop="interviewNumber" label="面试阶段" >
        <template #default="s">
          <span v-if="s.row.interviewNumber==1">初试</span>
          <span v-if="s.row.interviewNumber==2">复试</span>
        </template>
      </el-table-column>
      <el-table-column align='center' prop="interviewState" label="面试原状态" width="100" >
        <template #default="s">
          <div style="background:rgb(234,242,251);color:#446af3;height:80%;width:60%;margin:0 20% 0;font-size: 12px" v-if="s.row.interviewState==0">未面试</div>
          <div style="background:rgb(252,240,241);color:#D93e34;height:80%;width:60%;margin:0 20% 0;font-size: 12px" v-if="s.row.interviewState==1">面试中</div>
          <div style="background:rgb(217,246,229);color:#479d5c;height:80%;width:60%;margin:0 20% 0;font-size: 12px" v-if="s.row.interviewState==2">已面试</div>
          <div style="background:rgb(252,240,241);color:#D93e34;height:80%;width:60%;margin:0 20% 0;font-size: 12px" v-if="s.row.interviewState==3">已过期</div>
        </template>
      </el-table-column>
      <el-table-column align='center' prop="interviewNstate" label="面试现状态" width="100" >
        <template #default="s">
          <div style="background:rgb(234,242,251);color:#446af3;height:80%;width:60%;margin:0 20% 0;font-size: 12px" v-if="s.row.interviewNstate==0">未面试</div>
          <div style="background:rgb(252,240,241);color:#D93e34;height:80%;width:60%;margin:0 20% 0;font-size: 12px" v-if="s.row.interviewNstate==1">面试中</div>
          <div style="background:rgb(217,246,229);color:#479d5c;height:80%;width:60%;margin:0 20% 0;font-size: 12px" v-if="s.row.interviewNstate==2">已面试</div>
          <div style="background:rgb(252,240,241);color:#D93e34;height:80%;width:60%;margin:0 20% 0;font-size: 12px" v-if="s.row.interviewNstate==3">已过期</div>
        </template>
      </el-table-column>
      <el-table-column align='center' prop="interviewResul" label="面试原结果" width="100" >
        <template #default="s">
          <span v-if="s.row.interviewResul==1">面试通过</span>
          <span v-if="s.row.interviewResul==2">面试失败</span>
          <span v-if="s.row.interviewResul==3">未公布</span>
        </template>
      </el-table-column>
      <el-table-column align='center' prop="interviewNresul" label="面试现结果" width="100" >
        <template #default="s">
          <span v-if="s.row.interviewResul==1">面试通过</span>
          <span v-if="s.row.interviewResul==2">面试失败</span>
          <span v-if="s.row.interviewResul==3">未公布</span>
        </template>
      </el-table-column>
      <el-table-column align='center'  prop="interviewPerson" label="负责人" />
      <el-table-column align='center' prop="intervirecordingDate" label="操作时间" />
    </el-table>
  </el-dialog>
</template>
<script lang="ts" setup>
import {reactive, ref, toRefs,onBeforeMount} from "vue";
import { Search } from '@element-plus/icons-vue'
import router from "../../router";
import axios from "axios";
import {ElMessage, FormInstance} from "element-plus";
import moment from "moment";
//定义搜索数据
const souForm=reactive({
  interviName:'',
  jobdemandName:'',
  interviewState:'',
  interviewNumber:'',
})

//定义表单组件对象
const postForm = ref<FormInstance>();
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
})

const d = reactive({
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:5,
  //数据
  tableData:[],
  //记录表数据
  tableData2:[],
  //弹窗
  faromater:false,
  // //弹窗2
  faromate2r:false,
});
const ALltableData=ref([])
const getTabelData=()=>{//分页，这里没必要管一样就行
  let data =JSON.parse(JSON.stringify(ALltableData.value));//把数据转为JSON格式
  let shu = data.splice(
      (d.pageNo - 1) * d.pageSize,
      d.pageSize
  )
  d.tableData = shu ;
  console.log(d.tableData)
}

const handleSizeChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageSize = val ;
  d.pageNo = 1;
  getTabelData();
}

const handleCurrentChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageNo = val;
  getTabelData();
}
const getDate =()=>{
  axios.post("http://localhost:1688/Interviews/selectintercviews").then((res)=>{
    var data=res.data.data
    ALltableData.value = data;//放入表格
    d.total = res.data.data.length;//获得它的长度
    getTabelData();//调用方法
  })
}
//模糊查询
//选中元素事件,搜索
const JobMohu=()=>{
  axios.post("http://localhost:9884/Interviews/selsectInterViMoHu",souForm).then((res)=>{
    var data=res.data.data
    ALltableData.value = data;//放入表格
    d.total = res.data.data.length;//获得它的长度
    getTabelData();//调用方法
  })
  console.log(souForm)
}
//重置搜索
const chongzhi = () => {
      souForm.interviName='',
      souForm.jobdemandName='',
      souForm.interviewState='',
      souForm.interviewNumber='',
      getDate()
}
//面试申请
const interapp=()=>{
  //判断
      router.push({path: '/applicationtwo'})
}
//面试记录表数据
let str = moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
const jiluForm=reactive({
  interviName:'',
  interviewNumber:0,
  interviPhone:'',
  interviewNnumber:0,
  interviewState:0,
  interviewNstate:0,
  interviewResul:0,
  interviewNresul:0,
  interviewPerson:'',
  intervirecordingDate:str,
})
//开始面试
let riqi = moment(new Date()).format("YYYY-MM-DD HH:mm:ss")

const kais = (interviId) => {
  axios.post("http://localhost:1688/Interviews/selectViTime/"+interviId)
      .then((res)=>{
        // console.log(res.data.data[0].interviewApdate)
        //转换成 YYYY-MM-DD HH:mm:ss
        let msriq=formatTimer(res.data.data[0].interviewApdate)
        console.log(msriq.slice(0,13))
        //系统时间
        console.log(riqi.slice(0,13))
        if (msriq.slice(0,13)!=riqi.slice(0,13)){
          ElMessage.error('当前不是面试时间')
        }else{

              jiluForm.interviName=res.data.data[0].interviName;
              jiluForm.interviewNumber=res.data.data[0].interviewNumber;
              jiluForm.interviPhone=res.data.data[0].interviPhone;
              jiluForm.interviewNnumber=res.data.data[0].interviewNumber;
              jiluForm.interviewState=res.data.data[0].interviewState;
              jiluForm.interviewNstate=1;
              jiluForm.interviewResul=res.data.data[0].interviewResul;
              jiluForm.interviewNresul=res.data.data[0].interviewResul;
              jiluForm.interviewPerson=res.data.data[0].interviewPerson;
              //新增记录表
          axios.post("http://localhost:9884/intervcoding/addintivcoding",jiluForm)
              .then((res)=>{
                //修改状态
                axios.post("http://localhost:1688/Interviews/updateinterviewState/"+1+"/"+interviId)
                    .then((res)=>{
                      ElMessage({
                        message: '请尽快开始面试',
                        type: 'success',
                      })
                      getDate()
                    })
              })
        }
      })
}
//格式时间
const formatTimer=(value)=>{
  let date = new Date(value);
  let y = date.getFullYear();
  let MM: string | number = date.getMonth() + 1;
  MM = MM < 10 ? "0" + MM : MM;
  let d: string | number = date.getDate();
  d = d < 10 ? "0" + d : d;
  let h: string | number = date.getHours();
  h = h < 10 ? "0" + h : h;
  let m: string | number = date.getMinutes();
  m = m < 10 ? "0" + m : m;
  let s: string | number = date.getSeconds();
  s = s < 10 ? "0" + s : s;
  return y + "-" + MM + "-" + d + " " + h + ":" + m;
}



//给予面试结果
let interviIdplus=0
const getResut = (interviId) => {
  axios.post("http://localhost:1688/Interviews/selectViTime/"+interviId)
      .then((res)=>{
          d.faromater=true;
          interviIdplus=interviId;
          console.log(interviIdplus)

      })
}
const getResutone = () => {
  //根据id查询
  axios.post("http://localhost:1688/Interviews/selectViTime/"+interviIdplus)
      .then((res)=>{
        console.log(res.data.data)
        jiluForm.interviName=res.data.data[0].interviName;
        jiluForm.interviPhone=res.data.data[0].interviPhone;
        jiluForm.interviewNumber=res.data.data[0].interviewNumber;
        jiluForm.interviewNnumber=res.data.data[0].interviewNumber;
        jiluForm.interviewState=res.data.data[0].interviewState;
        jiluForm.interviewNstate=2;
        jiluForm.interviewResul=res.data.data[0].interviewResul;
        jiluForm.interviewNresul=1
        jiluForm.interviewPerson=res.data.data[0].interviewPerson;
        axios.post("http://localhost:9884/intervcoding/addintivcoding",jiluForm)
            .then((res)=>{
              axios.post("http://localhost:1688/Interviews/updateinterviewResul/"+1+"/"+interviIdplus)
                  .then((res)=>{
                    axios.post("http://localhost:1688/Interviews/updateinterviewState/"+2+"/"+interviIdplus)
                        .then((res)=>{
                          getDate()
                        })
                    d.faromater=false;
                  })
            })
      })
}
const getResuttwo = () => {
  axios.post("http://localhost:1688/Interviews/selectViTime/"+interviIdplus)
      .then((res)=>{
        console.log(res.data.data)
        jiluForm.interviName=res.data.data[0].interviName;
        jiluForm.interviPhone=res.data.data[0].interviPhone;
        jiluForm.interviewNumber=res.data.data[0].interviewNumber;
        jiluForm.interviewNnumber=res.data.data[0].interviewNumber;
        jiluForm.interviewState=res.data.data[0].interviewState;
        jiluForm.interviewNstate=2;
        jiluForm.interviewResul=res.data.data[0].interviewResul;
        jiluForm.interviewNresul=2
        jiluForm.interviewPerson=res.data.data[0].interviewPerson;
        axios.post("http://localhost:9884/intervcoding/addintivcoding",jiluForm)
            .then((res)=>{
              axios.post("http://localhost:1688/Interviews/updateinterviewResul/"+2+"/"+interviIdplus)
                  .then((res)=>{
                    axios.post("http://localhost:1688/Interviews/updateinterviewState/"+2+"/"+interviIdplus)
                        .then((res)=>{
                          getDate()
                        })
                    d.faromater=false;
                  })
            })
      })
}
//聘用邀请
const employ=(interviName,interviPhone,jobdemandName)=>{
  //判断
  axios.post("http://localhost:9884/inductions/selectInDucPhone/"+interviPhone).then((res)=>{
    if(res.data.data.length>0){
      ElMessage.error('请勿重复发送offer');
    }else {
      router.push({path: '/employ',query:{id:interviName,phone:interviPhone,job:jobdemandName}})
    }
  })
}
const getInterTime = () => {
  //检查初试申请是否过期
  axios.post("http://localhost:1688/Interviews/updateinterviewStatetwo/"+1+"/"+0).then((res)=>{

  })
  //检查复试申请是否过期
  axios.post("http://localhost:1688/Interviews/updateinterviewStatetwo/"+2+"/"+0).then((res)=>{

  })
}
//
// 查看记录表
const dianjixq = (row) => {
  d.faromate2r=true;
  console.log(row)
  axios.post("http://localhost:1688/intervcoding/selectByPhone/"+row.interviPhone).then((res)=>{
    d.tableData2=res.data.data
  })
}
onBeforeMount(function () {
  getDate()
  //检查面试申请是否过期
  getInterTime()
})
</script>

<style scoped>
.tbUpDiv{

  width: 100%;
  border-top: 1px solid gainsboro;
  border-bottom: 1px solid gainsboro;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tbImg{
  margin-left: 20px;

}

.tbUpPost{
  margin-left: 10px;
  display: flex;
  align-items: center;
}
.tbScenDiv{
  border-bottom: 1px solid gainsboro;
  position: relative;
}


</style>